<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="lib/ol.css" rel="stylesheet">
    <script src="lib/ol.js"></script>
</head>
<body>
<p>地图1</p>
<div id="map1" style="width: 100;height: 400px"></div>
<p>地图2</p>
<div id="map2" style="width: 100%;height: 400px"></div>
<button id="change">change</button>
<script>
 var map1= new ol.Map({
        layers:[
            new ol.layer.Tile({
                source:new ol.source.OSM()
            })
        ],
        view:new ol.View({
            center:[0,0],
            zoom:4
        }),
        target:'map1'
    });
   var map2= new ol.Map({
        layers:[
            new ol.layer.Tile({
                source:new ol.source.OSM()
            })
        ],
        view:new ol.View({
            center:[0,0],
            zoom:4
        }),
        target:'map2'
    });

    document.getElementById('change').onclick=function(){
        map1.setTarget('map2');
        map2.setTarget('map1');
    }
</script>

</body>
</html>